<template>
  <div class="category-second-page xtx-wrapper">
    <div class="container">
      <xtx-bread :parents="bread.parents">{{ bread.name }}</xtx-bread>
      <!-- 筛选区 -->
      <div class="xtx-filter">
        <div class="item">
          <div class="head">品牌：</div>
          <div class="body">
            <a
              :class="{ active: filterParams.brandId === brand.id }"
              @click="filterParams.brandId = brand.id"
              href="javascript:;"
              v-for="brand in brands"
              :key="brand.id"
              >{{ brand.name }}
            </a>
          </div>
        </div>
        <div class="item" v-for="attr in attrs" :key="attr.id">
          <div class="head">{{ attr.name }}：</div>
          <div class="body">
            <a
              :class="{active:filterParams.attrs.find(at=>at.id===attr.id).groupId==item.id}"
              @click="changAttr(attr.id, item.id)"
              href="javascript:;"
              v-for="item in attr.group"
              :key="item.id"
            >
              {{ item.name }}
            </a>
          </div>
        </div>
      </div>
      <!-- 结果区 -->
      <div class="xtx-result">
        <div class="order clearfix">
          <div class="fl">
            <a @click="changeSortType(1)" :class="{active:filterParams.sortType===1}" class="xtx-type" href="javascript:;">最新商品</a>
            <a @click="changeSortType(2)" :class="{active:filterParams.sortType===2}" class="xtx-type" href="javascript:;">最高人气</a>
            <a @click="changeSortType(3)" :class="{active:filterParams.sortType===3}" class="xtx-type" href="javascript:;">评论最多</a>
            <a @click="changeSortType(filterParams.sortType===5?4:5)" class="xtx-type" href="javascript:;">
              价格排序
              <span>
                <i class="iconfont icon-arrow-up" :class="{active:filterParams.sortType===4}" ></i>
                <i class="iconfont icon-arrow-down" :class="{active:filterParams.sortType===5}"></i>
              </span>
            </a>
          </div>
          <div class="fr">
            <xtx-checkbox v-model="filterParams.hasInventory">仅显示有货商品</xtx-checkbox>
            <xtx-checkbox v-model="filterParams.hasSale">仅显示特惠商品</xtx-checkbox>
          </div>
        </div>
        <div class="product">
          <ul>
            <li v-for="item in goods" :key="item.id">
              <router-link :to="`/product/${item.id}`">
                <img :src="item.picture" alt="" />
                <p class="name">{{item.name}}</p>
                <p class="desc">{{item.tag}}</p>
                <p class="price">¥{{item.price}}</p>
              </router-link>
            </li>
          </ul>
        </div>
        <!-- 加载更多 -->
        <infinite-loading v-if="initCom" @infinite="getGoods" :distance="100" spinner="waveDots" style="padding:120px">
          <div slot="no-more" class="noMore">
            <img src="../../assets/images/none.png" alt="">
            <p>亲，没有符合条件的商品了</p>
          </div>
        </infinite-loading>
      </div>
    </div>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'
export default {
  name: 'category-second-page',
  components: { InfiniteLoading },
  data () {
    return {
      // 请求后台的条件
      filterParams: {
        id: +this.$route.params.id,
        hasInventory: false,
        hasSale: false,
        sortType: undefined,
        brandId: undefined,
        attrs: []
      },
      pageParams: {
        page: 1,
        pagesize: 16
      },
      // 面包屑数据
      bread: {},
      // 品牌数据
      brands: [],
      // 属性数据
      attrs: [],
      // 商品列表,
      goods: [],
      // 初始化组件
      initCom: false
    }
  },
  created () {
    this.getFilter()
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.pageParams.page = 1
    this.goods = []
    this.getFilter()
  },
  watch: {
    filterParams: {
      handler (n, o) {
        this.pageParams.page = 1
        this.goods = []
        this.initCom = false
        this.$nextTick(() => {
          this.initCom = true
        })
      },
      deep: true
    }
  },
  methods: {
    getGoods ($state) {
      this.$http.post('/category/goods', { ...this.filterParams, ...this.pageParams }).then(res => {
        window.setTimeout(() => {
          if (res.data.items.length) {
            this.goods.push(...res.data.items)
            this.pageParams.page++
            $state.loaded()
          } else {
            $state.complete()
          }
        }, 1000)
      })
    },
    changeSortType (type) {
      this.filterParams.sortType = type
    },
    changAttr (id, groupId) {
      const obj = this.filterParams.attrs.find((item) => item.id === id)
      obj.groupId = groupId
    },
    getFilter () {
      this.$http
        .get('category/sub/filter?id=' + this.filterParams.id)
        .then((res) => {
          const { id, name, parentId, parentName, brands, saleProperties: attrs } = res.data.result
          this.bread = {
            id,
            name,
            parents: [{ path: '/category/' + parentId, name: parentName }]
          }
          this.brands = [{ id: undefined, name: '全部' }, ...brands]
          this.attrs = attrs.map((item) => {
            this.filterParams.attrs.push({ id: item.id, groupId: undefined })
            return {
              id: item.id,
              name: item.name,
              group: [{ id: undefined, name: '全部' }, ...item.properties]
            }
          })
        })
    }
  }
}
</script>

<style scoped lang='less'>
@import "./styles/sub.less";
</style>
